<template>
  <a-modal :width="600" v-model:visible="showSyncGoodsDialog" title="同步新商品" title-align="start" :mask-closable="false" :on-before-ok="submitData" :ok-loading="submitLoading" @cancel="closedDialog">
    <div class="flex-c">
      <p style="margin: 30px">店铺</p>
      <a-select v-model="shopInfos" placeholder="请选择" value-key="id" style="width: 300px" multiple allow-search allow-clear>
        <a-option v-for="(shop, i) in shopList" :key="i" :value="shop" :label="shop.shopName" />
      </a-select>
    </div>
    <div class="info-text">
      <p class="title">注意事项</p>
      <p>· 第一次同步在线商品大约需要等待30分钟~1小时,点击同步之后请耐心等待.</p>
      <p>· 同步之后再次同步会立即同步过来.</p>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, PropType } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { syncAmzProductSalesByShops } from '@/api/publish'

  const emit = defineEmits(['closed'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    shopList: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
  })

  const showSyncGoodsDialog = ref(props.isShow)
  const shopInfos = ref<Array<any>>([])
  const submitLoading = ref(false)

  // 关闭
  function closedDialog() {
    shopInfos.value = []
    showSyncGoodsDialog.value = false
    emit('closed')
  }
  // 提交
  async function submitData() {
    if (!shopInfos.value.length) {
      Message.error('请最少选择一个店铺')
      return false
    }
    let shopList = shopInfos.value.map((el: any) => {
      return {
        marketplaceId: el.marketplaceId,
        sellerId: el.sellerId,
      }
    })
    const res: any = await syncAmzProductSalesByShops({ shopList })
    if (res) {
      Message.success('已提交同步任务，大约30分钟后查看~')
      closedDialog()
      return true
    }
    return false
  }
</script>
<style lang="less" scoped>
  .info-text {
    padding-left: 20px;
    font-size: 12px;
    color: #999;
    .title {
      margin-bottom: 10px;
    }
  }
</style>
